<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">动作</block>
    </cu-custom>

    <!-- 动作 -->
    <view class="swiper-item animated fadeInLeft fast">
      <view>
        <!-- 搜索框这一行 -->
        <!-- <search @searchInput="searchInput" :qx="qx" :id="id" :planCourseId="planCourseId" :index="index" :experienceClass="experienceClass" /> -->
        <view class="search u-f-ac">
          <view class="s_left u-f-ac">
            <view class="all">动作来源<text style="margin-left: 14rpx;">></text></view>
            <image src="/static/search.png" lazy-load />
            <input class="uni-input zdy_input" placeholder="搜索动作" :value="search" @input="clearInput" />
            <text class="uni-icon" style="color: #AAAAAA;" v-if="showClearIcon" @click="clearIcon">&#xe434;</text>
            <image src="/static/yuyin.png" style="margin-left: 50rpx;" lazy-load />
          </view>
          <view @click="goPage" class="smart u-f-ajc u-f1">
            <image src="../../static/tianjia.png" lazy-load />
          </view>
        </view>


        <!-- 横向滚动选项卡一 -->
        <scroll1 v-if="tabBars1.length" @scrollOne="scrollOne" :tabBars="tabBars1" />
        <!-- 横向滚动选项卡二 -->
        <scroll2 v-if="tabBars2.length" @scrollTwo="scrollTwo" :tabBars="tabBars2" />
      </view>

      <scroll-view scroll-y="true" class="scroll_list">
        <view @click="jump" :data-src="'/pagesA/Preparation_plan/moveDetail?actionId='+item.id" class="item_list u-f-ac u-f-jsb relative"
          v-for="(item, index) in list" :key="index">
          <view class="imagess">
            <image style="width: 100%;height: 100%;" :src="item.picUrl ? 'https://jxjsservice.jxfit.cn/file'+item.picUrl : '../../static/11.png'"
              lazy-load />
          </view>
          <view class="msgs">
            <view>{{item.name}}</view>
            <view style="color: #aaa; font-size: 20rpx;">{{JSON.parse(item.actionLabelPO).join()}}</view>
          </view>

          <view class="u-f" v-if="qx != 'user'">
            <view @click.stop="addDetail('-', item, index)" class="jiajian">
              -
            </view>
            <view style="margin: 0 30upx;font-size: 36rpx;" class="u-f-ajc">
              {{item.nums}}
            </view>
            <view @click.stop="addDetail('+', item, index)" class="jiajian" style="background-color: #408CE2;border:none;color:#fff;">
              +
            </view>
          </view>
        </view>

      </scroll-view>
    </view>

    <uni-popup :isbottom100="isbottom100" id="popup" ref="popup" :type="type" :animation="true" @change="change">
      <scroll-view scroll-y="true" class="max-scroll">
        <view class="popup-view">
          <view @click="qingkongArr" class="qingkong u-f-ajc u-f-jsb">
            <view>已选动作</view>
            <view><text class="cuIcon-delete"></text>清空</view>
          </view>
          <view class="item_list popup-item u-f-ac u-f-jsb relative" v-for="(item, index) in numsDetail" :key="index">
            <view class="imagess">
              <image style="width: 100%;height: 100%;" :src="item.picUrl ? 'https://jxjsservice.jxfit.cn/file'+item.picUrl : '../../static/11.png'"
                lazy-load />
            </view>
            <view class="msgs">
              <view style="font-size: 30rpx;">{{item.name}}</view>
              <view class="group-list text-overflow" @click="toggle3(item, index)">
                <text style="margin-right: 10rpx;">
                  <text v-if="item.gropNum">{{item.gropNum}}组/</text>
                  <text v-if="item.numOfGroup">{{item.numOfGroup}}次/</text>
                  <text v-if="item.obstruction">{{item.obstruction}}KG/</text>
                  <text v-if="item.restOfGroup">间休{{item.restOfGroup}}秒/</text>
                  <text>{{item.devicesIdArray[0]}}</text>
                </text>
                <text style="padding-left: 10rpx;border-left: 1px solid;" class="cuIcon-edit"></text>
              </view>
            </view>
            <view @click="roundColse(item.id, index)" class="cuIcon-roundclose"></view>
          </view>
        </view>
      </scroll-view>
    </uni-popup>

    <editPopup ref="eidtPopup" :item="editDetail" :index="editDetailIndex" @editPopups="editPopups" />


    <view class="footer u-f-ac" v-if="qx != 'user'">
      <view style="font-size: 34rpx;">动作数量：<text style="color: #39BB9E; font-size: 50rpx;">{{movementNum}}</text></view>
      <view @click="toggle('bottom', 'popup')"><text style="color: #999;font-size: 26rpx;margin-right: 14rpx;">明细</text>
        <image src="../../static/34.png" :class="mingxiImg ? 'tran' : ''" lazy-load />
      </view>
      <view @click="queren" class="confirm u-f-ajc">确认</view>
    </view>
  </view>
</template>

<script>
  // import search from "./movement/search.vue"  // 取消使用搜索框组件。传值有问题
  import scroll1 from "./movement/scroll1.vue"
  import scroll2 from "./movement/scroll2.vue"
  import uniPopup from "../../components/uni-popup/uni-popup.vue"
  import editPopup from "../../components/edit-popup/edit-popup.vue"
  export default {
    components: {
      // search,
      scroll1,
      scroll2,
      uniPopup,
      editPopup,
    },
    data() {
      return {
        isbottom100: 1,
        showClearIcon: false,
        id: '',
        index: '',
        planCourseId: '',
        mingxiImg: false,
        search: '',
        tabBars1: [],
        actionParts: '', // 锻炼部位
        tabBars2: [],
        actionLabelPO: '',
        list: [],
        numsList: [],
        movementNum: 0,
        numsDetail: [],
        type: 'bottom',
        qx: 'no',
        experienceClass: "",
        editDetail: {},
        editDetailIndex: 0,
      };
    },
    // 监听用户下拉刷新
    // onPullDownRefresh() {
    //   setTimeout(() => {
    //     uni.stopPullDownRefresh();
    //   }, 2000);
    // },
    async onLoad(e) {
      console.log(e)
      this.id = e.id;
      this.planCourseId = e.planCourseId;
      this.index = e.index;
      this.experienceClass = e.experienceClass;
      if (e.qx == 'user') {
        this.qx = e.qx;
      }
      await this.getBody();
      await this.getTag();
      this.getData();
    },
    async onShow() {
      await this.getBody()
      await this.getTag()
      this.getData()
    },
    methods: {
      async getTag() {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getAllActionLabel",
          data: {
            bId: 1
          }
        })
        this.tabBars2 = datas;
      },
      async getBody() {
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getAllActionPart",
          data: {
            bId: 1
          }
        })
        datas.unshift({
          name: '全部',
          id: 'quanbu'
        })
        this.tabBars1 = datas;

      },
      async getData() {
        let data = {
          bId: 1,
          actionLabelPO: this.actionLabelPO ? this.tabBars2.find(item => item.id == this.actionLabelPO).name : '',
          actionParts: this.actionParts,
          name: this.search,
        }
        let {
          data: {
            datas
          }
        } = await this.$myRuquest({
          url: "/coach/training/getActionList",
          data,
        })
        // datas.forEach((item, index) => {
        //   item.nums = 0
        // })
        this.list = datas;
        if (!data.actionLabelPO && !data.actionParts && !data.name) {
          this.list.forEach((item, index) => {
            let obj = {
              id: item.id,
              nums: 0
            }
            this.numsList.push(obj)
          })
        }
        this.list.forEach((item, index) => {
          item.nums = this.numsList.find((item2) => item2.id == item.id).nums
        })

      },
      // // 子组件发射出来的方法 搜索框的内容
      // searchInput(e) {
      //   this.search = e
      //   this.getData();
      // },
      // 键盘事件监听 搜索
      clearInput: function(event) {
        this.search = event.detail.value;
        this.getData();
        if (event.detail.value.length > 0) {
          this.showClearIcon = true;
        } else {
          this.showClearIcon = false;
        }
      },
      // 清除搜索框
      clearIcon: function() {
        this.search = '';
        this.showClearIcon = false;
      },
      goPage() {
        uni.navigateTo({
          url: '/pagesA/Preparation_plan/Add_action?qx=' + this.qx + '&id=' + this.id + '&planCourseId=' + this.planCourseId +
            '&index=' + this.index + '&experienceClass=' + this.experienceClass,
        });
      },




      // 子组件发射出来的方法 选项卡一
      scrollOne(e) {
        console.log(e)
        // this.tabBars1 = e[0]
        this.actionParts = e
        if (e == 'quanbu') this.actionParts = '';
        this.getData();
      },
      // 子组件发射出来的方法 选项卡二
      scrollTwo(e) {
        console.log(e)
        this.actionLabelPO = e
        this.getData();
      },
      addDetail(cut, item, index) {
        console.log(item)
        let groupList = []
        let groupListItem = {
          "次数": item.numOfGroup,
          "器械": item.devicesIdArray ? item.devicesIdArray[0] : '',
          "阻力": item.obstruction,
          "间休": item.restOfGroup,
        }
        for (let i = 1; i <= item.gropNum; i++) {
          groupList.push(groupListItem)
        }
        let obj = {
          id: item.id,
          isShow: false,
          name: item.name,
          introduce: item.introduce,
          picUrl: item.picUrl ? item.picUrl : '',
          gropNum: item.gropNum,
          numOfGroup: item.numOfGroup,
          obstruction: item.obstruction,
          restOfGroup: item.restOfGroup,
          timeOfGroup: item.timeOfGroup,
          groupList: groupList,
          devicesIdArray: item.devicesIdArray ? item.devicesIdArray : [],
        }
        if (cut == '+') {
          // this.list[index].nums += 1;
          this.numsList.find(items => items.id == item.id).nums += 1;
          this.list.forEach((item, index) => {
            item.nums = this.numsList.find((item2) => item2.id == item.id).nums
          })
          this.movementNum += 1;
          this.numsDetail.push(obj);
        } else {
          if (this.list[index].nums <= 0) return
          // this.list[index].nums -= 1;
          this.numsList.find(items => items.id == item.id).nums -= 1;
          this.list.forEach((item, index) => {
            item.nums = this.numsList.find((item2) => item2.id == item.id).nums
          })
          this.movementNum -= 1;
          // 删除相同的第一个元素
          this.numsDetail.find((items, indexs) => {
            if (items.id == item.id) {
              this.numsDetail.splice(indexs, 1)
              return items
            }
          })
        }
      },
      toggle(type, names) {
        this.type = type
        if (this.mingxiImg) this.$refs[names].close()
        else this.$refs[names].open()
      },
      toggle3(item, index) {
        this.editDetail = item
        this.editDetailIndex = index
        console.log('点击进去的值', this.editDetail, this.editDetailIndex)
        this.$refs.eidtPopup.toggle3();
      },
      // 接受来自子组件的方法
      editPopups(e) {
        // 需要修改子数组
        let groupList = []
        let groupListItem = {
          "次数": e.editDetail.numOfGroup,
          "器械": e.editDetail.devicesIdArray,
          "阻力": e.editDetail.obstruction,
          "间休": e.editDetail.restOfGroup,
        }
        for (let i = 1; i <= e.editDetail.gropNum; i++) {
          groupList.push(groupListItem)
        }
        e.editDetail.groupList = groupList
        this.numsDetail.splice([e.editDetailIndex], 1, e.editDetail);
      },

      change(e) {
        console.log('popup ' + e.type + ' 状态', e.show)
        this.mingxiImg = !this.mingxiImg
      },
      qingkongArr() {
        this.numsDetail = [];
        this.movementNum = 0;
        this.numsList.forEach(item => item.nums = 0)
        this.list.forEach((item, index) => {
          item.nums = this.numsList.find((item2) => item2.id == item.id).nums
        })
        this.$refs.popup.close()
      },
      roundColse(id, index) {
        this.numsDetail.splice(index, 1);
        this.movementNum -= 1;

        // this.list.forEach(item => {
        //   if (item.id == id) item.nums -= 1
        // })
        this.numsList.find(items => items.id == id).nums -= 1;
        this.list.forEach((item, index) => {
          item.nums = this.numsList.find((item2) => item2.id == item.id).nums
        })
      },
      queren() {
        if (!this.movementNum) {
          uni.showToast({
            title: '请选择动作',
            icon: "loading",
          })
          return
        }
        uni.setStorageSync("numsDetail", this.numsDetail);
        uni.redirectTo({
          url: '/pagesA/Preparation_plan/Edit_course?id=' + this.id + '&index=' + this.index + '&planCourseId=' +
            this.planCourseId + '&experienceClass=' + this.experienceClass,
        });
      },
      jump(e) {
        console.log(e.currentTarget.dataset.src)
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
      goBack() {
        uni.navigateBack({
          delta: 1
        });
      },


    }
  }
</script>

<style lang="scss">
  @import "/common/uni.css";

  .headBack {
    width: 100%;
    height: 128rpx;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #39BB9E;
    z-index: 99;

    >image {
      width: 100%;
      height: 100%;
      background-size: cover;
    }

    .title {
      position: absolute;
      display: flex;
      left: 30rpx;
      top: 60rpx;
      color: #FFFFFF;
      font-size: 36rpx;

      >image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 40rpx;
      }
    }
  }

  .scroll-h {
    width: 290rpx;
    margin-top: 30rpx;
    flex-direction: row;
    white-space: nowrap;
    /* flex-wrap: nowrap; */
    /* border-color: #cccccc;
	border-bottom-style: solid;
	border-bottom-width: 1px; */
  }


  .uni-tab-item {
    display: inline-block;
    flex-wrap: nowrap;
    padding-left: 34rpx;
    padding-right: 34rpx;
  }

  .uni-tab-item-title {
    color: #666;
    font-size: 30rpx;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .swiper-box {
    width: 100%;
    height: 100vh;
    flex: 1;
  }

  .swiper-item {
    flex: 1;
    flex-direction: row;
  }

  .scroll_list {
    // position: absolute;
    // top: 270rpx;
    // left: 0;
    // right: 0;
    width: 100%;
    height: 1080rpx;
    background: #fff;
    padding: 60rpx 0 70rpx;
    box-sizing: border-box;
  }

  .item_list {
    padding: 0 50rpx 0 30rpx;
    box-sizing: border-box;
    margin-bottom: 46rpx;

    .imagess {
      width: 150rpx;
      height: 100rpx;
    }

    .msgs {
      position: absolute;
      left: 210rpx;
      font-size: 32rpx;
    }
  }

  .jiajian {
    border: 1upx solid #666;
    border-radius: 40upx;
    width: 60upx;
    height: 60upx;
    color: #666;
    text-align: center;
    line-height: 60upx;
  }

  .footer {
    width: 100%;
    height: 100rpx;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
    background-color: #fff;
    justify-content: space-between;
    padding-left: 20px;

    image {
      width: 20rpx;
      height: 20rpx;
    }

    .confirm {
      color: #FFFFFF;
      background-color: $uni-color-zhuti;
      width: 200rpx;
      height: 100%;
    }
  }

  .max-scroll {
    width: 100%;
    max-height: calc(100vh - 210rpx);
    background-color: #007AFF;
  }

  .popup-view {
    width: 100%;
    background-color: #FFFFFF;

    .qingkong {
      width: 100%;
      padding: 20rpx 50rpx;
      box-sizing: border-box;
      background-color: #F7F5F8;
      color: #999999;
    }

    .popup-item {
      padding: 16rpx 50rpx;
      margin: 0;
    }
  }

  .popup-edit {
    background-color: #fff;
    padding: 30rpx;
  }

  .edit-content {
    padding: 20rpx 0;

    image {
      width: 150rpx;
      height: 100rpx;
    }
  }

  .border-top {
    border-top: 1px solid #eee;

    .edit-input {
      margin: 4rpx 0;
      padding: 6rpx 20rpx;
      display: inline-block;
      font-size: 28rpx;
      color: $uni-color-zhuti;
      border: 1px solid $uni-color-zhuti;
      border-radius: 10rpx;

      input {
        display: inline-table;
        width: 40rpx;
        text-align: right;
        padding-right: 6rpx;
      }
    }
  }

  .eidt-button {
    width: 90%;
    margin: 20rpx auto 0;
    height: 90rpx;
    background-color: $uni-color-zhuti;
    border-radius: 10rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }


  .group-list {
    max-width: 400rpx;
    color: #aaa;
    font-size: 20rpx;
    background-color: #F0EEF1;
    padding: 2rpx 10rpx;
  }

  .popup-content {
    background-color: #fff;
    padding: 15px;
  }

  .items0 {
    border: 1px solid #FFFFFF;
    border-radius: 10rpx 0 0 10rpx;
  }

  .items1 {
    border: 1px solid #FFFFFF;
    border-radius: 0 10rpx 10rpx 0;
  }

  .uni-tab-item-title-active1 {
    color: #FFFFFF;
  }

  .uni-tab-item-title-active2 {
    background-color: rgba(204, 204, 204, 0.5);
  }

  .tran {
    transform: rotate(180deg);
  }


  .search {
    padding: 10rpx 15rpx;
    background-color: #fff;

    .s_left {
      background-color: #EFEFEF;
      width: 85%;
      height: 70rpx;
      padding: 0 20rpx;
      box-sizing: border-box;

      .all {
        color: #AAAAAA;
        padding-right: 20rpx;
        border-right: 1px solid #CCCCCC;
        margin-right: 8rpx;
        font-size: 24rpx;
      }

      >image {
        width: 34rpx;
        height: 34rpx;
      }

      .zdy_input {
        height: 70rpx;
        line-height: 70rpx;
        background-color: #EFEFEF;
        padding-left: 4rpx;
        width: 40%;
        font-size: 24rpx;
      }
    }
  }

  .smart {
    image {
      width: 60rpx;
      height: 60rpx;
    }
  }
</style>
